<template>
	<div class="wrapper">
		<!-- header -->
		<header>
			<div class="icon-location-box">
				<div class="icon-location"></div>
			</div>
			<div class="location-text">
				天津市天津大学北洋园<i class="fa fa-caret-down"></i>
			</div>
		</header>
		<!-- search 
	  <div class="search">
		<div class="search-fixed-top" ref="fixedBox">
		  <div class="search-box">
			<i class="fa fa-search"></i>搜索饿了么商家、商品名称
		  </div>
		</div>
	  </div>-->
		<!-- search -->

		<!-- search -->
		<div class="search">
			<div class="search-fixed-top" ref="fixedBox">
				<div class="search-box">
					<button @click="handleSearch" class="search-ico"><i class="fa fa-search"></i></button>
					<input type="text" v-model="searchQuery" placeholder="搜索饿了么商家、商品名称" class="search-input" />
					<button @click="handleSearch" class="search-button">搜索</button>
				</div>
			</div>
		</div>


		<!-- 点餐分类 -->
		<ul class="foodtype">
			<li @click="toBusinessList(1)">
				<img src="../assets/dcfl01.png" />
				<p>美食</p>
			</li>
			<li @click="toBusinessList(2)">
				<img src="../assets/dcfl02.png" />
				<p>早餐</p>
			</li>
			<li @click="toBusinessList(3)">
				<img src="../assets/dcfl03.png" />
				<p>跑腿代购</p>
			</li>
			<li @click="toBusinessList(4)">
				<img src="../assets/dcfl04.png" />
				<p>汉堡披萨</p>
			</li>
			<li @click="toBusinessList(5)">
				<img src="../assets/dcfl05.png" />
				<p>甜品 饮品</p>
			</li>
			<li @click="toBusinessList(6)">
				<img src="../assets/dcfl06.png" />
				<p>速食简餐</p>
			</li>
			<li @click="toBusinessList(7)">
				<img src="../assets/dcfl07.png" />
				<p>地方小吃</p>
			</li>
			<li @click="toBusinessList(8)">
				<img src="../assets/dcfl08.png" />
				<p>米粉面馆</p>
			</li>
			<li @click="toBusinessList(9)">
				<img src="../assets/dcfl09.png" />
				<p>包子粥铺</p>
			</li>
			<li @click="toBusinessList(10)">
				<img src="../assets/dcfl10.png" />
				<p>炸鸡炸串</p>
			</li>
		</ul>

		<!-- 广告 -->
		<div class="banner">
			<h3>品质套餐</h3>
			<p>搭配齐全吃得好</p>
			<a>立刻抢购 &gt;</a>
		</div>

		<!-- 超级会员部分 -->
		<div class="supermember">
			<div class="left">
				<img src="../assets/index_banner.png">
				<h3>超级会员</h3>
				<p>&#8226; 每月享超值权益</p>
			</div>
			<div class="right">
				立即开通 &gt;
			</div>
		</div>

		<!-- 推荐商家 -->
		<div class="recommend">
			<div class="recommend-line"></div>
			<p>推荐商家</p>
			<div class="recommend-line"></div>
		</div>

		<!-- 推荐方式 -->
		<ul class="recommendtype">
			<li>综合排序<i class="fa fa-caret-down"></i></li>
			<li>距离最近</li>
			<li>销量最高</li>
			<li>筛选<i class="fa fa-filter"></i></li>
		</ul>

		<!-- 推荐商家列表 -->
		<ul class="business">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					<div class="business-img-quantity" v-show="item.quantity > 0">{{ item.quantity }}</div>
				</div>
				<div class="business-info">
					<h3>{{ item.businessName }}</h3>
					<p>&#165;{{ this.toFixed2(item.starPrice) }}起送 | &#165;{{ this.toFixed2(item.deliveryPrice) }}配送</p>
					<p>{{ item.businessExplain }}</p>
				</div>
			</li>
		</ul>
		<div style="height: 0.1vw;"></div>
		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
//导入共通组件
import Footer from '../components/Footer.vue'
import BigNumber from 'bignumber.js';
export default {
	name: 'Index',
	mounted() {
		document.onscroll = () => {
			//获取滚动条位置
			let s1 = document.documentElement.scrollTop
			let s2 = document.body.scrollTop
			let scroll = s1 == 0 ? s2 : s1
			//获取视口宽度
			let width = document.documentElement.clientWidth
			//获取顶部固定块
			let search = this.$refs.fixedBox

			//判断滚动条超过视口宽度的12％时，搜索块变固定定位
			if (scroll > width * 0.12) {
				search.style.position = 'fixed'
				search.style.left = '0'
				search.style.top = '0'
			} else {
				search.style.position = 'static'
			}
		}
	},
	unmounted() {
		//当切换到其他组件时，就不需要document滚动条事件，所以将此事件去掉
		document.onscroll = null
	},
	components: {
		Footer,
	},
	data() {
		return {
			orderTypeId: 1,
			searchQuery: '', // 用于存储输入框的值
			businessArr: [],
		};
	},
	created() {
		this.user = this.$getSessionStorage('user');

		//根据orderTypeId查询商家信息
		console.log(this.orderTypeId);
		this.$axios.get(`/Businesses/orderTypeId/${this.orderTypeId}`)
			.then(response => {
				console.log(response.data);
				this.businessArr = response.data;
			}).catch(error => {
				console.error(error);
			});
	},
	methods: {
		toFixed2(price) {
			return new BigNumber(price).toFixed(2);
		},
		toBusinessList(orderTypeId) {
			this.$router.push({
				path: '/businessList',
				query: {
					orderTypeId: orderTypeId,
				},
			})
		},
		toBusinessInfo(businessId) {
			this.$router.push({ path: '/businessInfo', query: { businessId: businessId } });
		},
		async handleSearch() {
			try {
				const response = await this.$axios.get(`/Businesses/words/${encodeURIComponent(this.searchQuery)}`);
				console.log('搜索成功，响应数据:', response);
				this.$router.push({
					path: '/searchResults',
					query: {
						results: JSON.stringify(response.data),
					},
				});
			} catch (error) {
				console.error('搜索失败:', error);
			}
		},
	}
}
</script>

<style scoped>
.icon-location {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 50% 0;
	background: #fff;
	transform: rotate(-45deg);
}

.icon-location:after {
	content: '';
	width: 40%;
	height: 40%;
	margin: 30% 0 0 29%;
	background-color: #0097ff;
	position: absolute;
	border-radius: 50%;
}

.wrapper {
	width: 100%;
	height: 100%;
}

.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	display: flex;
	align-items: center;
}

.wrapper header .icon-location-box {
	width: 3.5vw;
	height: 3.5vw;
	margin: 0 1vw 0 3vw;
}

.wrapper header .location-text {
	font-size: 4.5vw;
	font-weight: 100;
	color: #fff;
}

.wrapper header .location-text .fa-caret-down {
	margin-left: 1vw;
}

.wrapper .search {
	width: 100%;
	height: 13vw;
}

.wrapper .search .search-fixed-top {
	width: 100%;
	height: 13vw;
	background-color: #0097ff;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	/*固定在顶部*/
	z-index: 1000;
}

.wrapper .search .search-fixed-top .search-box {
	width: 90%;
	height: 9vw;
	background-color: #fff;
	border-radius: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font: 8vw;
	color: #454343;
	font-family: '宋体';
	user-select: none;
}

.wrapper .search .search-fixed-top .search-box .search-ico {
	background-color: transparent;
	margin-left: 3vw;
	margin-right: -3vw;
	padding: 0vw 2vw;
	border: none;
	/* 去除按钮的边框 */
	/*background-color: #007bff;*/
	/*color: #fff;*/
	cursor: pointer;
	font-size: 3vw;
}

.wrapper .search .search-fixed-top .search-box .search-input {
	flex: 1;
	margin-right: -10vw;
	border: none;
	outline: none;
	width: 80%;
	/* 设置输入框的宽度 */
	height: 90%;
	/* 设置输入框的高度 */
	padding: 5vw;
	/* 设置输入框的内边距 */
	background-color: transparent;
	border-radius: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
	font: 8vw;
	color: gray;
	font-family: '宋体';
	user-select: none;
	font-size: 3.6vw;
}

.wrapper .search .search-fixed-top .search-box .search-button {
	margin-left: 20vw;
	margin-right: 1.5%;
	padding: 1% 3%;
	/*border: none;  去除按钮的边框 */
	border-color: #0097ff;
	border-style: solid;
	border-radius: 15%;
	background-color: #0097ff;
	color: #fff;
	cursor: pointer;
	font-size: 3.6vw;
}

.wrapper .search .search-fixed-top .search-box .fa-search {
	margin-right: 1vw;
}

.wrapper .foodtype {
	width: 100%;
	height: 48vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
}

.wrapper .foodtype li {
	width: 18vw;
	height: 20vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

.wrapper .foodtype li img {
	width: 12vw;
	height: 12vw;
}

.wrapper .foodtype li p {
	font-size: 3.2vw;
	color: #666;
}

.wrapper .banner {
	width: 95%;
	margin: 0 auto;
	height: 29vw;
	background-image: url(../assets/index_banner.png);
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
	padding: 2vw 6vw;
}

.wrapper .banner h3 {
	font-size: 4.2vw;
	margin-bottom: 1.2vw;
	user-select: none;
}

.wrapper .banner p {
	font-size: 3.4vw;
	color: #666;
	margin-bottom: 2.4vw;
	user-select: none;
}

.wrapper .banner a {
	font-size: 3vw;
	color: #c79060;
	cursor: pointer;
	font-weight: 700;
	user-select: none;
}

/****************** 超级会员部分 ******************/
.wrapper .supermember {
	/*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
	width: 95%;
	margin: 0 auto;
	height: 11.5vw;
	background-color: #FEEDC1;
	margin-top: 1.3vw;
	border-radius: 2px;
	color: #644F1B;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .supermember .left {
	display: flex;
	align-items: center;
	margin-left: 4vw;
	user-select: none;
}

.wrapper .supermember .left img {
	width: 6vw;
	height: 6vw;
	margin-right: 2vw;
}

.wrapper .supermember .left h3 {
	font-size: 4vw;
	margin-right: 2vw;
}

.wrapper .supermember .left p {
	font-size: 3vw;
}

.wrapper .supermember .right {
	font-size: 3vw;
	margin-right: 4vw;
	cursor: pointer;
}

.wrapper .recommend {
	width: 100%;
	height: 14vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .recommend .recommend-line {
	width: 6vw;
	height: 0.2vw;
	background-color: #888;
}

.wrapper .recommend p {
	font-size: 4vw;
	margin: 0 4vw;
}

.wrapper .recommendtype {
	width: 100%;
	height: 5vw;
	margin-bottom: 5vw;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .recommendtype li {
	font-size: 3.5vw;
	color: #555;
}

.wrapper .business {
	width: 100%;
	margin-top: 0vw;
	margin-bottom: 14vw;
}

.wrapper .business li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	border-bottom: solid 1px #DDD;
	user-select: none;
	cursor: pointer;

	display: flex;
	align-items: center;
}

.wrapper .business li .business-img {
	/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
	position: relative;
}

.wrapper .business li .business-img img {
	width: 20vw;
	height: 20vw;
	z-index: 1;
}

.wrapper .business li .business-img .business-img-quantity {
	width: 5vw;
	height: 5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;
	border-radius: 2.5vw;

	display: flex;
	justify-content: center;
	align-items: center;

	/*设置成绝对定位，不占文档流空间*/
	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}

.wrapper .business li .business-info {
	margin-left: 3vw;
}

.wrapper .business li .business-info h3 {
	font-size: 3.8vw;
	color: #555;
}

.wrapper .business li .business-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}
</style>